<template>
  <div class="widget-list-wrap">
    <div class="item" v-for="(item, idx) in list" :key="idx" @click="handleClick(item)">
      <el-tooltip effect="dark" :content="item.title" placement="right"><i :class="item.icon"></i></el-tooltip>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { camelCase } from 'lodash';
import { mapActions, mapGetters, mapState } from 'vuex';
import { registerComponents } from '@/plugins/index';
import uploadMixin from '@/mixins/assets-upload-mixin';
export default {
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  mixins: [uploadMixin],
  computed: {
    ...mapState('programs', ['scenes', 'currElementUUID'])
  },
  methods: {
    ...mapActions('programs', ['addElement', 'setCurrentElement', 'setLiveCurrentElement','setVideoCurrentElement']),
    ...mapGetters('programs', ['currScene', 'currElement']),
    handleClick(item) {
      // 背景音乐
      let elementsArr = {};
      console.log("标识",item.elName)
      if (item.elName === 'sxc-audio') {
        elementsArr = this.currScene().elements.find(item=>{
          return item.elName === 'sxc-audio'
        });
        this.beforeOpen({
          cid: 4,
          limit: 1,
          propName: {
            propsValue: 'bgAudioList'
          },
          selected: elementsArr ? elementsArr.propsValue.bgAudioList : ''
        });
        /* return */
      }
      // 图片
      if (item.elName === 'sxc-image') {
        elementsArr = this.currScene().elements.find(item=>{
          return item.elName === 'sxc-image'
        });
        this.beforeOpen({
          cid: 2,
          limit: 5,
          propName: {
            propsValue: 'imageSrcList'
          }
        });
      }
      // 视频
      if (item.elName === 'sxc-video') {
        elementsArr = this.currScene().elements.find(item=>{
          return item.elName === 'sxc-video'
        });
        this.beforeOpen({
          cid: 1,
          limit: 5,
          propName: {
            propsValue: 'videoList'
          },
          selected: elementsArr ? elementsArr.propsValue.videoList : ''
        });
      }
      // 文档
      if (item.elName === 'sxc-document') {
        elementsArr = this.currScene().elements.find(item=>{
          return item.elName === 'sxc-document'
        });
        this.beforeOpen({
          cid: 3,
          limit: 1,
          propName: {
            propsValue: 'docSrcList'
          }
        });
      }
      if (typeof Vue.component(item.elName) === 'function') {
        let hasLiveElementUUID = false;
        if(item.elName === 'sxc-live'){
          this.currScene().elements.forEach(res => {
            if (res.elName === 'sxc-live') {
              hasLiveElementUUID = res.uuid;
            }
          });
          if (hasLiveElementUUID !== false) {
            this.setLiveCurrentElement();
            this.getComponentProps(item.elName);
            return false;
          }
        }
        let hasElementUUID = false;
        if (item.elName === 'sxc-audio') {
          this.currScene().elements.forEach(res => {
            if (res.elName === 'sxc-audio') {
              hasElementUUID = res.uuid;
            }
          });
          if (hasElementUUID !== false) {
            this.setCurrentElement();
            this.getComponentProps(item.elName);
            return false;
          }
        }
        let hasVideoElementUUID = false;
        if (item.elName === 'sxc-video') {
          this.currScene().elements.forEach(res => {
            if (res.elName === 'sxc-video') {
              hasVideoElementUUID = res.uuid;
            }
          });
          if (hasVideoElementUUID !== false) {
            this.setVideoCurrentElement();
            this.getComponentProps(item.elName);
            return false;
          }
        }
        let needProps = this.getComponentProps(item.elName);
        this.addElement({
          ...item,
          needProps
        });
      }
    },
    getComponentProps(elName) {
      let elComponentData;
      for (let key in registerComponents) {
        if (key.toLowerCase() === elName.toLowerCase() || key.toLowerCase() === camelCase(elName).toLowerCase()) {
          elComponentData = registerComponents[key];
          break;
        }
      }
      if (!elComponentData) return {};
      let props = {};
      for (let name in elComponentData.props) {
        props[name] = [Object, Array].includes(elComponentData.props[name].type) ? elComponentData.props[name].default() : elComponentData.props[name].default;
      }
      return props;
    }
  }
};
</script>

<style lang="scss" scoped>
@import '../../assets/scss/variables';
.widget-list-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  .item {
    width: 40px;
    height: 41px;
    line-height: 41px;
    border-bottom: 1px solid #b9b9b9;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    .iconfont {
      color: #515151;
      font-size: 20px;
      &:hover {
        color: $primary;
      }
    }
  }
}
</style>
